import React,{useState} from 'react';
import { Modal, Form, Input, Button } from 'antd'
const FormItem = Form.Item;
const formLayout = {
    labelCol: {
        span: 7,
    },
    wrapperCol: {
        span: 13,
    },
};
const UpdateForm = (props) => {
    const { flag, onCancel, values,onSubmit } = props
    console.log(values, '回显的数据  ，12312312312')
    const [form] = Form.useForm(); // form用来处理表单校验
     // 默认参数
    const [formVals, setFormVals] = useState({
        title: props.values.title,
        content: props.values.content,
    });
    const FooterChild = () => {
        return <Button onClick={async () => {
            // 校验表单
            const data = await form.validateFields()
            setFormVals(prev=> {
                const newData = {...formVals, ...data}
                onSubmit({...newData, id:values.id})
                return newData
            })
        }}>提交</Button>
    }
    return (
        <Modal
            visible={flag}
            onCancel={() => { onCancel() }}
            footer={FooterChild()}
        >
            <Form
                {...formLayout}
                form={form}
                initialValues={{
                    title: formVals.title,
                    content: formVals.content,
                }}
            >
                <FormItem
                    name="title"
                    label="博客标题"
                    rules={[
                        {
                            required: true,
                            message: '请输入标题',
                        },
                    ]}
                >
                    <Input placeholder="请输入" />
                </FormItem>
                <FormItem
                    name="content"
                    label="博客内容"
                    rules={[
                        {
                            required: true,
                            message: '请输入内容',
                        },
                    ]}
                >
                    <Input placeholder="请输入" />
                </FormItem>
            </Form>
        </Modal>
    );
}

export default UpdateForm;
